.web-view-container {
  width: 100%;
  height: 100%;
}

.detail-panel {
  height: 100%;

  button.accessory-button {
    height: calc(100% - 5px);
    white-space: nowrap;
    color: var(--accessory-button-color);
    background-color: transparent;
    font-weight: normal;

    &:hover:not([disabled]), &[selected], &[aria-selected], &[name="json"] {
      background-color: transparent;
      position: relative;

      &:after, &:before {
        content:'';
        border: 1px solid var(--p-button-bg);
        position: absolute;
        top: 100%;
        right: 12px;
        left: 12px;
      }
    }

    &:active {
      color: var(--accessory-button-color);
    }

    &:disabled {
      cursor: default;
      color: var(--neutral-7);
    }

    .accessory-button-icon {
      width: 30px;
      height: 30px;
      background-repeat: no-repeat;
    }
  }

  button[aria-disabled="true"] {
    display: none;
  }
}

.inspector-container {
  box-sizing: border-box;
  font-family: var(--monospace-font-family);
  height: calc(100% - 4px);
  margin: 2px;
  padding: 0 0 18px 0;
  overflow-y: auto;
  word-wrap: break-word;
  white-space: pre-wrap;
  user-select: text;
}

.nothing-inspected {
  padding: 0 16px;

  & > a {
    color: var(--inspector-link-color);
  }
}

.left-arrow {
  background-color: var(--accessory-button-icon-color);
  -webkit-mask: url('../../../../media/ic_next.svg') no-repeat 50% 50%;
  -webkit-mask-size: 16px;
  transform: rotate(180deg);
}

.left-arrow-selected {
  background-color: var(--accessory-button-icon-color);
  -webkit-mask: url('../../../../media/ic_next.svg') no-repeat 50% 50%;
  -webkit-mask-size: 16px;
  transform: rotate(180deg);
}

.right-arrow {
  background-color: var(--accessory-button-icon-color);
  -webkit-mask: url('../../../../media/ic_next.svg') no-repeat 50% 50%;
  -webkit-mask-size: 16px;
}

.right-arrow-selected {
  background-color: var(--accessory-button-icon-color);
  -webkit-mask: url('../../../../media/ic_next.svg') no-repeat 50% 50%;
  -webkit-mask-size: 16px;
}
